<template>
  <div class="container">
    <div class="data-box">
      <!-- 表格 -->
      <el-table :data="dataTable" stripe style="width: 100%">
        <el-table-column prop="label" label="项目" align="center" min-width="40" />
        <el-table-column label="值" align="center">
          <template #default="scope">
            <div v-if="scope.row.type === 'select'" class="form-cell">
              <select
                :id="scope.row.id"
                v-model="scope.row.value" 
                class="form-select"
                @focus="saveOriginValue(scope.row.id, scope.row.value)" 
                @change="handleChange(scope.row.id, scope.row.value)"
              >
                <option disabled selected hidden>请选择一个选项</option>
                <option v-for="option in scope.row.options" :key="option" :value="option">
                  {{ option }}
                </option>
              </select>
            </div>
            <div v-else-if="scope.row.type === 'input' && scope.row.id ==='sleepTime' " class="form-cell">
              <el-time-picker
                v-model="scope.row.value"
                is-range
                range-separator="To"
                start-placeholder="Start time"
                end-placeholder="End time"
                @focus="saveOriginValue(scope.row.id, scope.row.value)"
                @change="handleChange(scope.row.id, scope.row.value)"
              />
            </div>
            <div v-else-if="scope.row.type === 'input' && scope.row.id !=='sleepTime'" class="form-cell">
              <input
                :id="scope.row.id"
                v-model="scope.row.value"
                :type="scope.row.inputType || 'text'"
                placeholder="请输入值"
                class="form-input"
                @focus="saveOriginValue(scope.row.id, scope.row.value)"
                @change="handleChange(scope.row.id, scope.row.value)"
              />
            </div>
            <div v-else-if="scope.row.type === 'switch'" class="form-cell">
              <!-- 使用 active-text 和 inactive-text 直接显示文字 -->
              <el-switch
                :id="scope.row.id"
                v-model="scope.row.value"
                active-text="开启"
                inactive-text="关闭"
                :active-value="true"
                :inactive-value="false"
                width="100px"
                @focus="saveOriginValue(scope.row.id, scope.row.value)"
                @change="handleChange(scope.row.id, scope.row.value,scope.row.type)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="graphWrapper">
        <div class="graph" id="rateGraph"></div>
      </div>
    </div>
    <!-- 修改确认框 -->
    <el-dialog
      v-model="dialogVisible"
      title="是否确定修改数据"
      width="500"
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelChange">取消</el-button>
          <el-button type="primary" @click="handleSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="js" setup>
import * as echarts from 'echarts';
import { reactive, ref ,onMounted ,watch} from 'vue'
import useWs from '@/service/websocket';
import useBaseData from '@/service/baseData';
import {changeRealBs} from '@/service/api'
import { computed } from 'vue';
const BaseDataResult = useBaseData()
const wsStore = useWs()
//提交确定dialog是否可视
const dialogVisible = ref(false)
// 左侧表格数据
const dataTable = reactive([
  {
    id:'bandWidth',
    label: '基站带宽调整',
    type: 'select',
    value: '请选择一个选项',
    options: ['100M', '80M', '60M', '40M', '30M', '20M'],
  },
  {
    id:'power',
    label: '发射功率调整',
    type: 'input',
    value: '',
    inputType: 'number',
  },
  {
    id:'sleepTime',
    label: '休眠时间调整',
    type: 'input',
    start:computed(()=>{
      return new Date(dataTable[2].value[0]).getTime()
    }),
    end:computed(()=>{
      return new Date(dataTable[2].value[1]).getTime()
    }),
    value:[]
  },
  {
    id:'state',
    label: '射频状态',
    type: 'switch',
    value: false,
  },
  {
    id:'switch',
    label: '供电开关',
    type: 'switch',
    value: false,
  },
  // {
  //   id:'inverter',
  //   label: '逆变器输出功率',
  //   type: 'input',
  //   value: '',
  //   inputType: 'number',
  // },
  // {
  //   id:'battery',
  //   label: '储能电池充放电功率',
  //   type: 'input',
  //   value: '',
  //   inputType: 'number',
  // },
]);
//存储原始数据
const originalData  = reactive({
  id:'',
  value:'',
  timeType:''
})
//
const options_24 = [
'00', '01', '02', '03', '04', '05', '06', '07', '08', '09',
'10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
'20', '21', '22', '23'
]
const options_60 = [
'00', '01', '02', '03', '04', '05', '06', '07', '08', '09',
'10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
'20', '21', '22', '23', '24', '25', '26', '27', '28', '29',
'30', '31', '32', '33', '34', '35', '36', '37', '38', '39',
'40', '41', '42', '43', '44', '45', '46', '47', '48', '49',
'50', '51', '52', '53', '54', '55', '56', '57', '58', '59',
]
//保存修改前的数据
const saveOriginValue = (id, value, timeType) =>{
  originalData.id = id,
  originalData.value = value,
  originalData.timeType = timeType
}
//
const handleChangeSleepTime = () =>{
  if(dataTable[2].startTime && dataTable[2].endTime){
    dialogVisible.value = true
  }
}
//预修改
const handleChange = (id, value,type) =>{
  dialogVisible.value = true
  if(type === 'switch'){
    originalData.id = id,
    originalData.value = !value
  }
}
//取消修改
const cancelChange =() =>{
  if(originalData.id === 'sleepTime'){
    console.log(dataTable[2].value,originalData.value)
    dataTable[2].value = originalData.value
  }else{
    for(let key in dataTable){
      if(dataTable[key].id === originalData.id){
        dataTable[key].value = originalData.value
      }
    }
  }
  dialogVisible.value = false
}
//数据提交
//todo 休眠时间需要传输的数据与其他的不一样
const handleSubmit = async() => {
  dialogVisible.value = false;
  //获取修改的那个数据
  const id = originalData.id
  let value
  for(let i=0;i<dataTable.length;i++){
    if(dataTable[i].id === originalData.id){
      value = dataTable[i].value
      break
    }
  }
  //传给后端的对象
  const payload = {}
  if(id === 'sleepTime'){
    payload.start = dataTable[2].start
    payload.end = dataTable[2].end
  }else{
    payload[id] = value
  }
  console.log(payload)
  //此处提交数据
  changeRealBs(payload)
};
//曲线图数据
const option = {
  title: {
    text: '基\n站\n速\n率\n图',
    top: "center",
    textStyle:{
      fontSize:30,
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['下行MAC速率', '下行RLC速率', '上行MAC速率', '上行RLC速率']
  },
  xAxis: {
    type: 'time',
    data: [],
    animationDurationUpdate:0,
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '下行MAC速率',
      type: 'line',
      data: [],
      smooth: true,
      lineStyle: {
        color: '#F8B85C'
      },
      animationDurationUpdate:0
    },
    {
      name: '下行RLC速率',
      type: 'line',
      data: [],
      smooth: true,
      lineStyle: {
        color: '#F3F659'
      },
      animationDurationUpdate:0
    },
    {
      name: '上行MAC速率',
      type: 'line',
      data: [],
      smooth: true,
      lineStyle: {
        color: '#6EFBB8'
      },
      animationDurationUpdate:0
    },
    {
      name: '上行RLC速率',
      type: 'line',
      data: [],
      smooth: true,
      lineStyle: {
        color: '#31C0F3'
      },
      animationDurationUpdate:0
    }
  ],
  grid: {
    left: "5%",
    top: "5%",
    right: "5%",
    bottom: "5%",
    containLabel: true 
  },
};
let chart
onMounted(()=>{
  chart = echarts.init(rateGraph)
  setInterval(()=>{
    const now = Date.now()
    option.series[0].data.push([now,wsStore.data.DL_MAC])
    option.series[1].data.push([now,wsStore.data.DL_RLC])
    option.series[2].data.push([now,wsStore.data.UL_MAC])
    option.series[3].data.push([now,wsStore.data.UL_RLC])
    if(option.series[0].data.length>20){
      option.series[0].data.shift()
      option.series[1].data.shift()
      option.series[2].data.shift()
      option.series[3].data.shift()
    }
    //更新折线图
    chart.setOption(option)
  },1000)
})
</script>

<style scoped>
/* 整体容器样式 */
.container {
  display: flex;
  justify-content: flex-start; /* 只保留左侧边框 */
  align-items: flex-start;
  padding: 20px;
  background-color: #f5f5f5; /* 可选背景色 */
  height: 100vh; /* 占满视口高度 */
}

/* 通用白色圆角框样式 */
.data-box {
  background-color: #fff;
  border-radius: 12px; /* 圆角半径 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  padding: 20px;
  width: 100%; /* 左侧框占据整个宽度 */
  height: 100%; /* 占满父容器高度 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  overflow: auto; /* 当内容超出时启用滚动 */
}

/* 表格内单元格样式 */
.form-cell {
  align-items: center;
}

/* 下拉框样式 */
.form-select {
  width: 30%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 输入框样式 */
.form-input {
  width: 30%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px; /* 输入框字体大小 */
  color: #333;
}

/* 占位符字体大小 */
.form-input::placeholder {
  font-size: 12px; /* 调整占位符字体大小 */
  color: #999;
}

.graphWrapper{
  width:100%;
  height:50vh;
  /* background-color: black; */
  margin-top: 5vh;
}
.graph{
  width:100%;
  height:100%;
}
</style>
